<template>
<!-- 广告页 -->
<div class="content" >
    <!-- 右上角离开按钮 -->
    <div class="leave"  v-show="goClickStatus" @click="clickGoHome">{{second}} 跳过</div>
    <!--白底图-->
    <div style="width:100%;height:100%;position:absolute;z-index:997;background:#fff!important;">
    <img  class="ad_bottom wrapper" src="@/assets/img/ad/ad_bottom_750_1334.png" > 
    </div>
    <!-- 广告图片 -->
    <!-- 裁剪图 -->
    <!-- <vueCropper 
    v-if="vueCropperStatus"
    ref="cropper" 
    :img="option.img"
    :outputSize="option.size"
    :outputType="option.outputType"
    :canMoveBox="option.canMoveBox"
    :canMove="option.canMove"
    :autoCrop="true"
    :autoCropWidth="option.autoCropWidth"
    :autoCropHeight="option.autoCropHeight"
    @imgLoad="handle"
    ></vueCropper> -->
    <!-- 裁剪过的广告图 -->
    <!-- <img  style="position:absolute;z-index:998;top:0px;" :src="img">
    <img v-if="adBottomStatus" class="ad_bottom" src="static/img/ad/ad_bottom_750_1334.png" > -->
</div>
</template>
<script>
import {VueCropper} from 'vue-cropper'
import storage from '@/utils/localstorage' 
export default {
    data() {
        return {
            adBottomStatus: false,
            goClickStatus: false,
            vueCropperStatus: true,
            goHomeTime: null,
            img: '',
            second: 3,
            option:{
                img: '@/assets/img/ad/ad1.png',
                size: 1,
                outputType: 'png',
                canMove: false,
                canMoveBox: false,
                autoCropHeight: '',
                autoCropWidth: ''
            }
        }
    },
    components: {VueCropper},
    created() {
        //设置裁剪框大小
       /*  var adImg = ["static/img/ad/ad1.png", "static/img/ad/ad2.png", "static/img/ad/ad3.png"]; 
        this.option.img = adImg[Math.floor(Math.random()*adImg.length)]
        //console.log(this.option.img)
        let clientWidth = document.body.clientWidth
        let clientHeight = document.body.style.height || document.body.clientHeight || document.documentElement.clientHeight
        ////console.log(clientHeight)
        ////console.log(clientWidth)
        let limitHeight = clientWidth * 1920/ 1080
        let limitWidth =  clientHeight * 1080/ 1920
        if(limitHeight< document.body.clientHeight){
            this.option.autoCropHeight = limitHeight
            this.option.autoCropWidth = limitHeight * clientWidth/clientHeight
            
        }else{
            this.option.autoCropWidth = limitWidth
            this.option.autoCropHeight = limitWidth * clientHeight/clientWidth
        }
        //是否显示底部logo
        let ratio = document.body.clientHeight / document.body.clientWidth
        if(ratio >= 1.8){
            this.adBottomStatus = true
        } */
    },
    mounted() {

        this.goHomeTime = window.setInterval(()=>{
                this.goClickStatus = true
                this.goHome()
            },2000); 
    },
    //注意销毁掉监听，不然报错
    beforeDestroy () {
        if(this.goHomeTime){
            window.clearInterval(this.goHomeTime)
        }
        },
    methods: {
        handle(){
            this.$refs.cropper.getCropData((data) => {
                this.img = data  
                this.goClickStatus = true
                this.vueCropperStatus = false
                this.goHomeTime = window.setInterval(()=>{
                    this.goHome()
                },1000); 
            })
        },
        goHome() {   
            this.second = this.second - 1
            if(this.second == 0){
            this.clickGoHome()
            }
        },
        clickGoHome(){
            if(!localStorage.token){
                this.$router.push({name: 'authLogin'})
            }else{
                this.$router.push({name: 'home'})
            }
        }
    }
}

</script>
    
    <style scoped>
    .content{
    width: 100%;
    height: 100%;
    background: #000001;
    }
    .content img{
    width:100%;
    /* height: 100%; */
    }
    .leave{
    width: 60px;
    height: 25px;
    background: red;
    position: absolute;
    right: 10px;
    top: 6%;
    border-radius: 10px;
    font-size: 15px;
    background: #45BAF4;
    text-align: center;
    line-height: 25px;
    z-index: 999;
    color: #fff;
    }
    .ad_bottom{
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 9999;
    }
    img {
    vertical-align: unset!important;
    }
    .vue-cropper{
    background:#000001!important;
}

@keyframes fade-in {
0% {opacity: 0;}/*初始状态 透明度为0*/
40% {opacity: 0;}/*过渡状态 透明度为0*/
100% {opacity: 1;}/*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {/*针对webkit内核*/
0% {opacity: 0;}
40% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fade-out {
0% {opacity: 1;}/*初始状态 透明度为1*/
40% {opacity: 1;}/*过渡状态 透明度为1*/
100% {opacity: 0;}/*结束状态 透明度为0*/
}
@-webkit-keyframes fade-out {/*针对webkit内核*/
0% {opacity: 1;}
40% {opacity: 1;}
100% {opacity: 0;}
}
.wrapper {
animation: fade-in;/*动画名称*/
animation-duration: 1.5s;/*动画持续时间*/
-webkit-animation:fade-in 1.5s;/*针对webkit内核*/
}


</style>
